<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快速入门升级</title>
</head>
<body>
<!-- 视图 -->
<div id="div">
    <div>姓名：{{name}}</div>
    <div>班级：{{classRoom}}</div>
    <button onclick="hi()">打招呼</button>
    <button onclick="update()">修改班级</button>
</div>
</body>
<script src="vue-2.6.12.js"></script>
<script>
    // 脚本
    let vm = new Vue({
        el : "#div",
        data : {
            name : "张三",
            classRoom : "316"
        },
        methods : {
            speak : function () {
                //this : 当前Vue核心对象 (就是这里的vm)
                console.log(this.name + "正在speak")
            },
            show(){
                console.log("show")
                this.speak()
            }
        }
    })
    //声明函数
    function hi() {
        vm.show()
    }
    function update() {
        //修改data中的数据,引用这个数据也会随之改变
        vm.classRoom = "9527"
    }

</script>
</html>